<template>
	<!-- 	<view class="  cxzczxtret display-flex czbj"> -->
	<view class="">
		<view class="cxcterytytrtt">
			<dxnav @qingchusr="qingchusr"></dxnav>
		</view>
		<view class=" pl40 pr40 pt20">
			<!-- <scroll-view class="xczxcsdfretreyt"  :scroll-y="true"
				:scroll-top="scrollTop"> -->
			<template v-for="sd in zhumxdtr">
				<view class="display-flex fdsfsdcvrety" v-if="sd">
					<view class="xcxzcdsrfet">
						{{sd.content}}
					</view>
				</view>
			</template>
			<view class="display-flex fdsfsdcvrety" :class="sd.cls" v-for="(sd,idx) in jnxcerter">
				<view class="xcxzcdsrfet">
					{{sd.text}}
					<view class="fsddcxctrry" v-if="(jnxcerter.length-1)==idx&&!sd.cls&&!store.state.isjysd">



						<view v-if="store.state.isboxrtt==0" @tap="boxcxfgfg(sd.text,1)">
							<text class="iconfont icon-bofang1 ls cz fz40"></text>
							<text class="cf ml10 fz28 cz">播放</text>
						</view>

						<view class="spinner" v-if="store.state.isboxrtt==1">
							<view class="xcxcrtrey">
								<view class="half-circle-spinner">
									<view class="circle circle-1"></view>
									<view class="circle circle-2"></view>
								</view>
							</view>

						</view>

						<view class=" display-flex" v-if="store.state.isboxrtt==2" @tap="zhansdtyy">
							<text class="iconfont icon-zanting ls cz fz40"></text>
							<view class="xcxcrtrey">
								<image src="../../static/img/speaking.gif" class="xczxcdsrtt cz" mode="widthFix">
								</image>
							</view>
							<text class="cf ml10 fz28 cz">暂停</text>
						</view>
					</view>
				</view>

			</view>


			<view class="display-flex fdsfsdcvrety" v-if="xcxdfrtyu.length>0">
				<view class="xcxzcdsrfet">
					<template v-for="sd in xcxdfrtyu">{{sd.content}}</template>
					<text class="xcxtrtctyu cz"></text>
				</view>
			</view>



			<!-- 加载动画 -->
			<view class="display-flex fdsfsdcvrety " v-if="sijmxcxzrt">
				<view class="xcxzcdsrfet">
					<div class="loader">
						<div class="dot"></div>
						<div class="dot"></div>
						<div class="dot"></div>
					</div>
				</view>
			</view>
			<!-- 	</scroll-view> -->
			<view class="cxcxretytxct" id="xcxtryuuu">

			</view>
		</view>
		<view class="kxcxzsertrety pd display-flex pr">
			<!-- <image src="../../static/img/qingwa.png" class="cxxvcdftrytry" @tap="jxczxdf=true"></image>
			 -->

			<view class="cxxvcdftrytry pr" @tap="qwuixdr">
				<view class="kkzxzxrtytyty  ycx" :class="store.state.score_message?'act':''">
					<view class="fz40 fdxcctyucty">
						{{store.state.score_message}}
					</view>
					<view class="fz28 mt5">
						{{store.state.beijdrt}}
					</view>
				</view>
				<c-lottie ref="cLottieRef" :src='jxcdr' loop width="200" height="200" @tap="dianjisrtt"
					class="w100 h100">

				</c-lottie>
			</view>


			<view class="kmxcerxrtre w100 display-flex pr" :class="xjxdrf">


				<view class="wave-container" v-if="store.state.isanzhu"  @tap="store.state.isanzhu=false">
					<div class="wave cen">
			
			
					</div>
				<!-- 	<view class=" vertical-center h100 cf fz24">
						如长时间一直等待，请点击
					</view> -->
					<!-- 	<view class="cxcxsertey vertical-center">
						<image src="../../static/img/speaking.gif" class="cxsdfertety " mode="widthFix"></image>
					</view> -->
				</view>
				<template v-else>
				
					<view class="flex-1 fz32  vertical-center dfsdfsdxdd aa b" @touchstart="cvdvdfgtret"
						@touchend.prevent="handleTouchEnd" style="-webkit-user-select: none;">
						按住 说话
					</view>
					<view class="flex-1 fz32  vertical-center dfsdfsdxdd ab">
						<textarea focus auto-focus v-model="store.state.xiaoxinr" class="liuinpute cf" ref="liuinpute" auto-height
							placeholder="有问题尽管问我 ~" placeholder-style="color:#1C222D"></textarea>
					</view>
					<template v-if="store.state.xiaoxinr&&xjxdrf=='ab'">
						<view class="vertical-center pr20  " @tap="fasongxert">
							<text class="cf iconfont icon-Up-  fz50 cz"></text>
						</view>
					</template>
					<template v-else>
						<view class="vertical-center pr20 dfsdfsdxdd aa" @tap="fsdfsdffdrter">
							<!-- <text class="z3 iconfont b icon-jianpan fz50 cz"></text> -->
							<image src="../../static/img/jianpan.png" class="zxczrytyrtvftry"></image>
						</view>
						<view class="vertical-center pr20 dfsdfsdxdd ab" @tap="xjxdrf='aa'">

							<image src="../../static/img/yuying.png" class="zxczrytyrtvftry"></image>
						</view>
					</template>
				</template>
			</view>
			<!-- <view class="flex-1">
				<input v-model="msgText" placeholder="请输入内容" type="text" class="xcxzcrtretret" />
			</view>
			<button type="primary" class="fz32 ml20" @tap="gafdsewr">发送</button> -->
		</view>

		<view class="xzxcxzsdtrrec vertical-center" v-if="store.state.cur_level_info">
			<view class="w100">
				<view class="cf pr40 tr">
					<image @tap="jxcxdf=true" src="../../static/img/dfdsfdsa.png"
						class="zxcxzctretry wow animate__animated animate__bounceInRight animate__delay-1s"></image>

				</view>
				<view class="pr" @tap="store.state.cur_level_info=null">
					<view class="pr">
						<!-- 	<text class="ls  xcxcfrtryy ysbhssrt">{{store.state.cur_level_info.level_name}}</text> -->
						<image :src="store.state.userInfo.next_level_info.level_upgrade_popup"
							class="w100 cz wow cz animate__animated animate__bounceIn" mode="widthFix"></image>
					</view>

					<view class="cf fz50 ysbhssrt cen xczxcxrxtrt wow cz animate__animated animate__bounceIn">

						还有{{store.state.next_level_info.level_score -store.state.cur_level_info.level_score}}积分晋升<text
							class="ls">{{store.state.next_level_info.level_name}}</text>

					</view>
				</view>
				<view class="cen cf dsfxcxvfdgtr">
					<image src="../../static/img/closedfdsf.png" @tap="store.state.cur_level_info=null"
						class="zxczxrtrytry wow animate__animated animate__bounceInUp animate__delay-1s"></image>
				</view>
			</view>
		</view>
	</view>

	<view class="kxzczxcrtecxt vertical-center" v-if="jxcxdf">
		<view class="pr">
			<view class="pr">
				<image src="../../static/img/closedfdsf.png" class="zxczxrtrytry dfdczxcvxvty" @tap="jxcxdf=false">
				</image>

				<image :src="xczxdfdsf" class="xcxzcvfrt" mode="widthFix"></image>
			</view>
			<view class="mt40 cf cen">
				长按图片保存相册
				<!-- <image src="../../static/img/fenxiangbtn.png" class="cxcxzctrtxrt" mode="widthFix"></image> -->
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, onUnmounted, computed } from "vue"
	import { hf, dxrequest, dxSToast, dxrequestxert, transferTimeYMDHm, bUrl } from "@/util/index.js"
	import { signCallback, config } from "@/util/asrauthentication";
	import dxnav from "@/components/dxnav.vue";
	import { initsock, senmsg, zhsdr, jxcxfe, ojxdrr, qwuixdr } from "@/util/tts.js"
	import { store } from "@/store/index.js"
	import { addongs } from "@/util/config.js"
	import {kaishi,tingzhi} from "@/util/yysb.js"
	import { fetchEventSource } from '@microsoft/fetch-event-source';
	
	const jxcxdf = ref()
	const xczxdfdsf = ref()
	const jxcdr = ref(addongs.pray)
	const xcxdfrtyu = ref([])
	const sijmxcxzrt = ref()
	let isCanStop = false;
	const xjxdrf = ref("aa")
	const msgText = ref()
	const jnxcerter = ref([])
	const liuinpute = ref();
	const ishowly = ref(false);
	let systemInfo = uni.getSystemInfoSync();
	const skill_code = ref("")
	const conversation_id = ref()
	conversation_id.value = uni.getStorageSync("conversation_id")
	const zhumxdtr = ref([])
	let deviceId = systemInfo.deviceId;



	// const currentTime = computed(() => {
	// 	 = cxzcdsf
	// })


	const fsdfsdffdrter = () => {
		xjxdrf.value = 'ab'
		// liuinpute.value.focus()
	}
	const gafdsewr = async () => {
		if (!store.state.xiaoxinr) {
			uni.showToast({
				title: "请输入内容",
				icon: "none"
			})
			return
		}
		await injsdffd()
		store.state.xiaoxinr = ""

	}
	let isdr = 0
	const injsdffd = async () => {
		store.state.tetsdr = ""
		chatFun()
	}



	// 按住说话
	const cvdvdfgtret = async () => {
		ojxdrr()
		kaishi(()=>{fasongxert()})
		console.log(111)

	}

	// 按住松开
	const handleTouchEnd = () => {
		
		setTimeout(a=>{
			console.log(222)
			store.state.isanzhu = false
			tingzhi()
		},500)
		
	};



	// initsock()
	const fasongxert = () => {
		if(!store.state.xiaoxinr){
			return
		}
		console.log(store.state.tetsdr,2)
		jnxcerter.value.push({
			cls: "ab",
			text:store.state.xiaoxinr
		})
		store.state.tetsdr = ""

		chatFun()
	}

	let kxcgfrtr = ""
	const xcxcsdfretret = (data) => {
		try {
			var mess = data
			var msg = new SpeechSynthesisUtterance(mess);
			msg.volume = 1000;
			msg.rate = 1;
			msg.pitch = 1;
			window.speechSynthesis.speak(msg);
		} catch (e) {

		}
	};
	const zhansdtyy = () => {
		zhsdr()
	}
	const chatFun = async (type) => {
		let objs = {
			"device_id": deviceId,
			"query": store.state.xiaoxinr,
			"conversation_id": conversation_id.value,
			skill_code:skill_code.value

		}
		sijmxcxzrt.value = true
		if (type != 2) {
			jxcdr.value = addongs.surprise
			store.commit("fasongshijian", "发送消息")
		}

		store.state.xiaoxinr = ""
		const token = uni.getStorageSync("token")
		fetchEventSource(bUrl + "api/child/chat", {
			method: 'POST',
			headers: {
				token: token,
				"Content-Type": 'application/json',
				"Accept": 'text/event-stream'
			},
			body: JSON.stringify(objs),
			onmessage(event) {
				store.state.ttsText = ""
				// uni.hideLoading()
				sijmxcxzrt.value = false
				console.log(event.data)
				let jsojdr = {}
				try {
					jsojdr = JSON.parse(event.data)
				} catch (e) {

				}
				if (jsojdr.conversation_id != undefined && !conversation_id.value) {
					conversation_id.value = jsojdr.conversation_id
					uni.setStorageSync("conversation_id", jsojdr.conversation_id)
				}
				if (type == 2) {
					zhumxdtr.value.push(jsojdr.message)

				} else {
					if (!jsojdr.is_finish && jsojdr.message != undefined) {
						xcxdfrtyu.value.push(jsojdr.message)
						if (!store.state.isjysd) {
							store.state.isboxrtt = 1
						}

					}
				}

				setTimeout(() => {
					uni.pageScrollTo({
						selector: "#xcxtryuuu",
						duration: 0
					});
					// scrollTop.value = new Date().getTime()
				}, 200)
				if (jsojdr.event == "done" && type != 2) {

					if (xcxdfrtyu.value.length > 0) {
						let jxdrt = ""
						xcxdfrtyu.value.map(a => {
							jxdrt += a.content
						})
						jnxcerter.value.push({
							text: jxdrt
						})
						initsock(jxdrt, 2)
						xcxdfrtyu.value = []
					}
					if (skill_code.value) {
						uni.setStorageSync("dx" + conversation_id.value + skill_code.value, jnxcerter.value)
					} else {
						uni.setStorageSync("dx" + conversation_id.value, jnxcerter.value)
					}
				}
			},
		})
	}
	onLoad((data) => {
		store.commit("getconfig")
		store.commit("getUserinfo")
		console.log(data)
		console.log(9998)
		skill_code.value = data.skill_code
		if (skill_code.value) {
			if (uni.getStorageSync("dx" + conversation_id.value + skill_code.value)) {
				let jxdrt = uni.getStorageSync("dx" + conversation_id.value + skill_code.value)
				jnxcerter.value = jxdrt
			}
		} else {
			if (uni.getStorageSync("dx" + conversation_id.value)) {
				let jxdrt = uni.getStorageSync("dx" + conversation_id.value)
				jnxcerter.value = jxdrt
			}
		}
		chatFun(2)
	})

	const boxcxfgfg = (data, ty) => {
		initsock(data, 1)
	}

	const qingchusr = () => {
		uni.showModal({
			title: "温馨提示",
			content: "确认清除本次会话吗？",
			async success({ confirm }) {
				if (confirm) {
					let jxxrty = "dx" + conversation_id.value
					if (skill_code.value) {
						jxxrty = "dx" + conversation_id.value + skill_code.value
					}
					uni.removeStorageSync(jxxrty)
					jnxcerter.value = []
					uni.setStorageSync(jxxrty, jnxcerter.value)
				}
			}
		})
	}

	const dianjisrtt = () => {
		if (store.state.score_message) {
			return
		}
		jxcdr.value = addongs.smile
		store.commit("fasongshijian", "点击宠物")
		
	}
	const getqcImg = async () => {
		const { data } = await dxrequest("api/child/user/poster")
		xczxdfdsf.value = 'data:image/png;base64,' + data.poster
	}
	getqcImg()
</script>

<style scoped>
	.cxzczxtret {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		overflow: hidden;
		background: #1C222D;
	}

	.kxcxzsertrety {
		/* box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); */
		position: fixed;
		left: 0;
		bottom: 0rpx;
		width: 100%;
		background: #1C222D;
		padding-bottom: 40rpx;
	}

	.xcxzcrtretret {
		height: 78rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 8rpx;
		padding-left: 20rpx;
	}

	.cxcxexcertrry {
		width: 60rpx;
		height: 60rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		border-radius: 8rpx;
	}

	.xcxzcdsrfet {
		padding: 20rpx 30rpx;
		/* background: #fff; */
		/* box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); */
		font-size: 28rpx;
		border-radius: 20rpx;
		display: inline-block;
		position: relative;
		border: 4rpx solid #445966;
		color: #fff;
	}

	/* 	.xcxzcdsrfet::after {
		content: ' ';
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		background: #fff;
		transform: rotate(45deg);
		left: -10rpx;
		top: 16rpx;
	} */

	.fdsfsdcvrety {
		margin-bottom: 24rpx;
	}

	.fdsfsdcvrety.ab {
		flex-direction: row-reverse
	}

	.fdsfsdcvrety.ab .flex-1 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: flex-end;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-left: 0;
		margin-right: 30rpx;


	}

	.fdsfsdcvrety.ab .xcxzcdsrfet::after {
		left: initial;
		right: -10rpx;
		top: 16rpx;
		/* background: #00a861 !important; */
	}

	.fdsfsdcvrety.ab .xcxzcdsrfet {
		/* background: #00a861 !important; */
		color: #fff;
		border-color: rgba(53, 255, 95, 1);
	}

	.xczxcsdfretreyt {
		overflow: auto;
	}


	.fsddcxctrry {
		border-top: 2rpx solid #445966;
		margin-top: 15rpx;
		padding-top: 12rpx;
		font-size: 24rpx;
		position: relative;
		top: 5rpx;
	}

	.kmxcerxrtre {
		min-height: 88rpx;
		background: #13C648;
		box-shadow: 0px 2px 11px 0px rgba(110, 110, 110, 0.23);
		border-radius: 24rpx;
		overflow: hidden;
	}

	.dfsdfsdxdd {
		display: none;
	}

	.dfsdfsdxdd.aa {
		display: flex;
	}

	.kmxcerxrtre.ab .dfsdfsdxdd.aa {
		display: none;
	}

	.kmxcerxrtre.ab .dfsdfsdxdd.ab {
		display: flex;
	}


	.liuinpute {
		width: 100%;
		min-height: 20rpx;
		border-radius: 4px;
		font-size: 26rpx;
		background: transparent;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		color: #333;
		overflow: hidden;
		line-height: 1.2;
		padding-left: 40rpx !important;
	}


	.wave-container {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #14BA6A;
		overflow: hidden;
	}

	.wave {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100px;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
		animation: wave-animation 2s linear infinite;
	}

	@keyframes wave-animation {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(100%);
		}
	}

	.kmxcxerxftyue {
		position: absolute;
		left: 0;
		bottom: 20rpx;
		width: 1rpx;
		height: 1rpx;
		background: linear-gradient(150deg, #EAFDF2 0%, #B9F2CE 100%);
		border-radius: 100%;
		display: flex;
	}

	.kmxcxerxftyue.act {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		border-radius: 0;
	}

	.xczxcrerwxr {
		width: 160rpx;
		height: 160rpx;
		background: url("../../static/img/yuing.png");
		background-size: 100% 100%;
	}

	.cxxvcdftrytry {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		right: 60rpx;
		top: -119rpx;

	}

	.cxxvcdftrytry.act {}

	@keyframes jump-and-grow {
		0% {
			transform: translate(0, 0) scale(1);
		}

		50% {
			transform: translate(10px, -10px) scale(1.3);
		}

		100% {
			transform: translate(0, 0) scale(1);
		}
	}

	.zxczrytyrtvftry {
		width: 50rpx;
		height: 50rpx;
	}

	.xcxtrtctyu {
		display: inline-block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #fff;
		animation: jumpxcrt 0.5s infinite;
	}

	@keyframes jumpxcrt {
		0% {
			background: #000;
		}



		100% {
			background: #fff;
		}
	}

	.xczxcxrxtrt {
		position: absolute;
		left: 0;
		bottom: 80rpx;
		width: 100%;
	}

	.kkzxzxrtytyty {
		position: absolute;
		left: 0rpx;
		top: -60rpx;
		font-size: 24rpx;
		z-index: 999;
		text-align: center;
		width: 130rpx;
		opacity: 1;
		transform: scale(1);
		display: none;
		color: #F9F1D1;

	}

	.kkzxzxrtytyty.act {
		display: block;
	}

	.fdxcctyucty {
		position: relative;
		top: 40rpx;
	}

	.kkzxzxrtytyty.act .fdxcctyucty {
		animation: moveAndScale 2s forwards;
	}

	@keyframes moveAndScale {
		0% {
			transform: translateY(0) scale(0.5);
			opacity: 1;
		}

		70% {
			transform: translateY(-40rpx) scale(1);
			opacity: 1;
		}

		100% {
			transform: translateY(-60rpx) scale(1.2);
			opacity: 0;
		}
	}

	.xcxcfrtryy {
		position: absolute;
		top: 230rpx;
		right: 130rpx;
		width: 180rpx;
		text-align: center;
		z-index: 10;
		font-size: 44rpx !important;
		transform: rotate(-5deg) scale(1.1);
	}

	.cxcterytytrtt {
		position: sticky;
		top: 0;
		z-index: 999;
		background: #1C222D;
	}

	.cxcxretytxct {
		height: 200rpx;
		background: #1C222D;
	}
</style>